<template>
  <div class="token-pairs">
    <el-dialog
      :title="visible.type===0? '添加交易对':'修改交易对'"
      :visible.sync="visible.show"
      width="650px"
      center
      :close-on-click-modal="false"
    >
      <div class="content" v-if="visible.type===2">
        <h3>{{visible.data.title}}</h3>
        <p class="txt" v-html="visible.data.content"></p>
      </div>
      <div class="content" v-else>
        <div class="line flex-left">
          <label class="title">交易对</label>
          <el-select
            v-model="param.from"
            placeholder="请选择"
            size="small"
            class="short-select"
            clearable
            filterable
          >
            <el-option v-for="item in options.from" :key="item.coin_id" :value="item.currency"></el-option>
          </el-select>
          <span class="ex">兑换</span>
          <el-select
            v-model="param.to"
            placeholder="请选择"
            size="small"
            class="short-select"
            clearable
            filterable
          >
            <el-option v-for="item in options.toExc" :key="item.coin_id" :value="item.currency"></el-option>
          </el-select>
        </div>
        <div class="line flex-left">
          <label class="title min-title">{{param.from}}小数点位数</label>
          <el-input-number
            size="small"
            v-model="param.from_scale"
            :min="1"
            :max="8"
            label="计算所用小数点位数"
            class="short-input"
          ></el-input-number>
          <label class="title min-title">{{param.to}}小数点位数</label>
          <el-input-number
            size="small"
            v-model="param.to_scale"
            :min="1"
            :max="8"
            label="计算所用小数点位数"
            class="short-input"
          ></el-input-number>
        </div>
        <div class="line flex-left">
          <label class="title">最小兑换量</label>
          <el-input size="small" v-model="param.min_amount" placeholder="请输入最小兑换量"></el-input>
          <span class="unit">{{param.from}}</span>
        </div>
        <div class="line flex-left">
          <label class="title">行情类型</label>
          <el-select v-model="param.manual_price_status" placeholder="请选择" size="small">
            <el-option
              v-for="item in options.type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="line flex-left" v-show="param.from&&param.to&&param.manual_price_status==='0'">
          <label class="title">行情来源</label>
          <el-select
            v-model="param.from_market_price_source"
            filterable
            placeholder="请选择"
            size="small"
          >
            <el-option v-for="(item,index) in excs" :key="index" :value="item"></el-option>
          </el-select>
          <div
            class="price-box"
            v-if="param.from_market_price_source!==''"
            v-loading="price_loading"
            element-loading-text="行情查询中..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0)"
          >
            <span class="un-support" v-if="price===''&&!price_loading">此交易所不支持，请重选！</span>
            <span v-if="price!==''&&!price_loading">{{price}} {{`${param.to} ≈ 1 ${param.from}`}}</span>
          </div>
        </div>
        <!-- <div class="line flex-left" v-show="param.to&&param.manual_price_status==='0'">
          <label class="title">{{param.to}}</label>
          <el-select v-model="param.to_market_price_source" placeholder="请选择" size="small">
            <el-option v-for="(item,index) in excs" :key="index" :value="item"></el-option>
          </el-select>
        </div>-->
        <div class="line flex-left" v-show="param.manual_price_status==='1'">
          <label class="title">行情价</label>
          <el-input size="small" v-model="param.manual_price" placeholder="请输入固定行情价"></el-input>
          <span class="unit">{{param.to}} ≈ 1 {{param.from}}</span>
        </div>
        <div class="line flex-left">
          <label class="title">行情价小数位</label>
          <el-input-number
            size="small"
            v-model="param.price_scale"
            :min="1"
            :max="8"
            label="计算所用小数点位数"
            class="medium-input"
          ></el-input-number>
        </div>
        <div class="line flex-left">
          <label class="title">手续费类型</label>
          <el-select v-model="param.fee_type" placeholder="请选择" size="small">
            <el-option
              v-for="item in options.feeType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="line flex-left" v-show="param.fee_type==='0'">
          <label class="title" style="font-size:8px">交易总额百分比</label>
          <!-- <el-input size="small" v-model="param.fee_percent" placeholder="请输入收取手续费百分比"></el-input> -->
          <el-input-number
            size="small"
            v-model="param.fee_percent"
            :min="0"
            :max="100"
            :precision="2"
            :step="0.1"
            label="请输入收取手续费百分比"
            class="medium-input"
          ></el-input-number>
          <span class="unit">%</span>
        </div>
        <div class="line flex-left">
          <label class="title">最小手续费</label>
          <el-input size="small" v-model="param.min_fee" placeholder="请输入最小手续费"></el-input>
          <span class="unit">{{param.from}}</span>
        </div>
        <div class="line flex-left">
          <label class="title">闪兑价格点差</label>
          <!-- <el-input size="small" v-model="param.market_price_float" placeholder="请输入闪兑价格点差值"></el-input> -->
          <el-input-number
            size="small"
            v-model="param.market_price_float"
            :min="0"
            :max="100"
            :precision="2"
            :step="0.1"
            label="请输入闪兑价格点差值"
            class="medium-input"
          ></el-input-number>
          <span class="unit">%</span>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible.show = false">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="submit"
          :disabled="onSubmit"
          :loading="onSubmit"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addTokenPairs,
  updateTokenPairs,
  getCoinsPrice
} from "./FlashChange.service";
export default {
  props: ["visible", "id", "coins", "excs"],
  data() {
    return {
      param: {
        platform_id: "",
        type: "2",
        from: "",
        to: "",
        from_market_price_source: "",
        to_market_price_source: "",
        min_amount: "",
        from_scale: "",
        to_scale: "",
        manual_price: "",
        manual_price_status: "0",
        price_scale: "",
        min_fee: "",
        fee_percent: "0",
        fee_type: "0",
        sort: "1",
        market_price_float: ""
      },
      options: {
        from: [],
        toExc: [],
        type: [
          { label: "自动获取", value: "0" },
          { label: "固定行情", value: "1" }
        ],
        feeType: [
          { label: "浮动手续费", value: "0" },
          { label: "固定手续费", value: "1" }
        ]
      },
      price: "",
      price_loading: false,
      onSubmit: false
    };
  },
  watch: {
    visible: {
      handler(item) {
        this.param.platform_id = this.id;
        if (item.type === 1 || item.type === 2) {
          this.param = JSON.parse(JSON.stringify(item.data));
          this.$set(
            this.param,
            "fee_type",
            Number(item.data.fee_percent) === 0 ? "1" : "0"
          );
          this.$set(this.param, "platform_id", this.id);
          this.$set(
            this.param,
            "fee_percent",
            Number(item.data.fee_percent) * 100
          );
          this.$set(
            this.param,
            "market_price_float",
            Number(item.data.market_price_float) * 100
          );
        }
        if (item.show === false)
          this.param = {
            platform_id: "",
            type: "2",
            from: "",
            to: "",
            from_market_price_source: "",
            to_market_price_source: "",
            min_amount: "",
            from_scale: "",
            to_scale: "",
            manual_price: "",
            manual_price_status: "0",
            price_scale: "",
            min_fee: "",
            fee_percent: "0",
            fee_type: "0",
            sort: "1",
            market_price_float: "0"
          };
      },
      deep: true
    },
    coins: {
      handler(item) {
        this.options.from = this.options.toExc = item;
      },
      deep: true
    },
    "param.from": {
      handler(token) {
        let tokens = [];
        this.coins.forEach(item => {
          if (token !== item.currency) tokens.push(item);
        });
        this.options.toExc = tokens;
        if (token === "") {
          this.param.from_market_price_source = "";
          this.price = "";
        } else if (this.param.to !== "") {
          if (this.param.from_market_price_source !== "") {
            this.price_loading = true;
            let param = {
              currency: this.param.from,
              base_currency: this.param.to,
              exchange: this.param.from_market_price_source
            };
            getCoinsPrice(param)
              .then(res => {
                this.price_loading = false;
                this.price = res.data || "";
              })
              .catch(() => {
                this.price_loading = false;
              });
          } else return;
        }
      },
      deep: true
    },
    "param.to": {
      handler(token) {
        let tokens = [];
        this.coins.forEach(item => {
          if (token !== item.currency) tokens.push(item);
        });
        this.options.from = tokens;

        if (token === "") {
          this.param.from_market_price_source = "";
          this.price = "";
        } else if (this.param.from) {
          if (this.param.from_market_price_source !== "") {
            this.price_loading = true;
            let param = {
              currency: this.param.from,
              base_currency: this.param.to,
              exchange: this.param.from_market_price_source
            };
            getCoinsPrice(param)
              .then(res => {
                this.price_loading = false;
                this.price = res.data || "";
              })
              .catch(() => {
                this.price_loading = false;
              });
          } else return;
        }
      },
      deep: true
    },
    "param.from_market_price_source"(source) {
      this.param.to_market_price_source = this.param.from_market_price_source;
      this.price_loading = true;
      if (source !== "") {
        let param = {
          currency: this.param.from,
          base_currency: this.param.to,
          exchange: this.param.from_market_price_source
        };
        getCoinsPrice(param)
          .then(res => {
            this.price_loading = false;
            this.price = res.data || "";
          })
          .catch(() => {
            this.price_loading = false;
          });
      }
    }
  },
  mounted() {},
  methods: {
    async submit() {
      if (this.param.manual_price_status === "0" && this.price === "") {
        this.$notify.warning({
          title: "提示",
          message: "该交易对此交易所暂不支持，请重新确认！"
        });
        return;
      }
      let param = JSON.parse(JSON.stringify(this.param));
      param.fee_percent = Number(param.fee_percent) / 100;
      param.market_price_float = Number(param.market_price_float) / 100;
      param.min_fee = param.min_fee === "" ? 0 : param.min_fee;
      const res =
        this.visible.type === 0
          ? await addTokenPairs(param)
          : await updateTokenPairs(param);
      if (res.code === 0) {
        this.$notify.success({
          title: "提示",
          message: this.visible.type === 0 ? "发布成功" : "修改成功"
        });
        this.$emit("success");
        this.visible.show = false;
      }
    }
  }
};
</script>

<style lang="scss">
.token-pairs {
  .el-dialog__header {
    border-bottom: 1px solid #e9e9e9;
    padding: 15px;
    font-weight: 600;
  }
  .content {
    .unit {
      margin-left: 10px;
    }
    .line {
      // line-height: 50px;
      margin-top: 12px;
      .title {
        width: 100px;
        text-align: right;
        margin-right: 20px;
        flex-shrink: 0;
      }
      .min-title {
        font-size: 10px;
      }
    }
    .ex {
      display: inline-block;
      width: 120px;
      text-align: center;
    }
    .el-input {
      width: 250px;
    }
    .el-select {
      width: 250px;
    }
    .short-select {
      width: 150px;
      .el-input {
        width: 150px;
      }
    }
    .short-input {
      width: 150px;
      .el-input {
        width: 150px;
      }
    }
    .medium-input {
      width: 250px;
    }
    .price-box {
      min-width: 200px;
      min-height: 32px;
      margin-left: 10px;
      span {
        line-height: 32px;
      }
    }
    .el-upload__tip {
      line-height: 20px;
      color: #d93a49;
    }
  }
}
</style>